<template>
	<om-page title="销售指导价查询">
		<view class="padding-xl text-center text-xxl bg-steelblue">销售指导价查询</view>
		<view class="content">
			<om-wing-blank>
				<view class="input-group">
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left om-color">销售业务类型：</view>
							<view class="uni-list-cell-db">
								<view class="uni-list-cell-cont">
									<picker mode="selector" @change="salePropertyChange" :value="salePropertyIndex"
										:range="salePropertyArray" range-key="dicname">
										<view class="uni-input"
											:class="{active : (salePropertyIndex || salePropertyIndex == 0)}">
											{{(salePropertyIndex || salePropertyIndex == 0) ? salePropertyArray[salePropertyIndex].dicname : '请选择'}}
										</view>
									</picker>
								</view>
								<uni-icons :size="25" class="uni-icon-wrapper" color="#939393" type="arrowright" />
							</view>
						</view>
					</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">规格型号：</view>
							<view class="uni-list-cell-db">
								<input v-model="newProductStd" @input="newProductStdChange" placeholder="请输入，字母区分大小写" />
							</view>
						</view>
					</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">产品线类别：</view>
							<view class="uni-list-cell-db">
								<view class="uni-list-cell-cont">
									<picker mode="selector" @change="marketingPlanningProductChange"
										:value="marketingPlanningProductIndex" :range="marketingPlanningProductArray"
										range-key="dicname">
										<view class="uni-input"
											:class="{active : (marketingPlanningProductIndex || marketingPlanningProductIndex == 0)}">
											{{(marketingPlanningProductIndex || marketingPlanningProductIndex == 0) ? marketingPlanningProductArray[marketingPlanningProductIndex].dicname : '请选择'}}
										</view>
									</picker>
								</view>
								<uni-icons :size="25" class="uni-icon-wrapper" color="#939393" type="arrowright" />
							</view>
						</view>
					</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">同售价型号：</view>
							<view class="uni-list-cell-db">
								<view class="uni-list-cell-cont">
									<picker mode="selector" @change="salesPriceModelChange"
										:value="salesPriceModelIndex" :range="salesPriceModelArray" range-key="dicname">
										<view class="uni-input"
											:class="{active : (salesPriceModelIndex || salesPriceModelIndex == 0)}">
											{{(salesPriceModelIndex || salesPriceModelIndex == 0) ? salesPriceModelArray[salesPriceModelIndex].dicname : '请选择'}}
										</view>
									</picker>
								</view>
								<uni-icons :size="25" class="uni-icon-wrapper" color="#939393" type="arrowright" />
							</view>
						</view>
					</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">名称关键字：</view>
							<view class="uni-list-cell-db">
								<view class="uni-list-cell-cont">
									<picker mode="selector" @change="productKeyChange" :value="productKeyIndex"
										:range="productKeyArray" range-key="dicname">
										<view class="uni-input"
											:class="{active : (productKeyIndex || productKeyIndex == 0)}">
											{{(productKeyIndex || productKeyIndex == 0) ? productKeyArray[productKeyIndex].dicname : '请选择'}}
										</view>
									</picker>
								</view>
								<uni-icons :size="25" class="uni-icon-wrapper" color="#939393" type="arrowright" />
							</view>
						</view>
					</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">品号：</view>
							<view class="uni-list-cell-db">
								<input v-model="newProductCode" @input="newProductCodeChange" placeholder="请输入" />
							</view>
						</view>
					</view>
				</view>
				<view class="btn-row" style="margin-top: 0;"><button type="primary" class="primary"
						@tap="bindConfirm">确认</button></view>
			</om-wing-blank>
		</view>
		<view class="nodata" v-show="dataList.length == 0 && dataStatus">{{ '暂无数据！' }}</view>
		<view class="page__bd" style="margin-top: 20px;">
			<uni-list>
				<view v-for="(item, index) in dataList" :key="index">
					<uni-list-item :title="'品号：'+item.newProductCode" :avatar="index + 1"
						:avatarBgColor="calcBgColor(item)" @click="getoLink(item)">
						<view slot="note">
							<view>品名：<text class="">{{item.newProductName}}</text></view>
							<view>型号：<text class="">{{item.newProductStd}}</text></view>
							<view>同售价型号：<text class="">{{item.salesPriceModelName}}</text></view>
							<view>
								内部指导价({{item.salesGuidancePrice}})、平台结算价({{item.carryForwardUnitPrice}})、代理价({{item.salespersonAgencyPrice}})、公开指导价({{item.marketPrice}})
							</view>
						</view>
					</uni-list-item>
				</view>
			</uni-list>
		</view>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
	import moment from '@/static/js/moment.js'
	import {
		ignoreHtml,
		errorModal,
		confirmModal
	} from 'static/js/common.js'
	import {
		mapState
	} from 'pinia';
	import {
		useLoginUserStore
	} from '@/stores/login-user.js';

	const app = getApp();
	export default {
		data() {
			return {
				salePropertyId: "",
				salePropertyArray: [],
				salePropertyIndex: null,
				marketingPlanningProductId: '',
				marketingPlanningProductArray: [],
				marketingPlanningProductIndex: null,
				salesPriceModelId: "",
				salesPriceModelArray: [],
				salesPriceModelIndex: null,
				productKeyId: '',
				productKeyArray: [],
				productKeyIndex: null,
				newProductCode: '',
				newProductStd: '',
				dataList: [],
				dataStatus: false,
				pageTotal: 1,
				pageNum: 1,
				pageSize: 20,
				scrollTop: 0,
			};
		},
		computed: {
			...mapState(useLoginUserStore, ['userName', 'userId'])
		},
		methods: {
			salePropertyClearFunc() {

			},
			salePropertyChange(e) {
				this.salePropertyIndex = e.detail.value
			},
			marketingPlanningProductChange(e) {
				this.newProductStd = ''
				this.marketingPlanningProductIndex = e.detail.value
				this.salesPriceModelIndex = null
				this.productKeyIndex = null
				this.newProductCode = ''
			},
			salesPriceModelChange(e) {
				this.newProductStd = ''
				this.salesPriceModelIndex = e.detail.value
				this.marketingPlanningProductIndex = null
				this.productKeyIndex = null
				this.newProductCode = ''
			},
			productKeyChange(e) {
				this.newProductStd = ''
				this.productKeyIndex = e.detail.value
				this.salesPriceModelIndex = null
				this.marketingPlanningProductIndex = null
				this.newProductCode = ''
			},
			newProductCodeChange(e) {
				if (e.target.value) {
					this.newProductStd = ''
					this.marketingPlanningProductIndex = null
					this.salesPriceModelIndex = null
					this.productKeyIndex = null
				}
			},
			newProductStdChange(e) {
				if (e.target.value) {
					this.marketingPlanningProductIndex = null
					this.salesPriceModelIndex = null
					this.productKeyIndex = null
					this.newProductCode = ''
				}
			},
			bindConfirm() {
				let _that = this;
				if (!_that.salePropertyId) {
					_that.om.toast("请选择销售业务类型!")
				}

				_that.pageNum = 1
				_that.dataList = []
				_that.dataStatus = false
				_that.salePropertyId = _that.salePropertyArray[_that.salePropertyIndex].id
				_that.marketingPlanningProductId = (_that.marketingPlanningProductIndex || _that
					.marketingPlanningProductIndex == 0) ? _that.marketingPlanningProductArray[_that
					.marketingPlanningProductIndex].id : ''
				_that.salesPriceModelId = (_that.salesPriceModelIndex || _that.salesPriceModelIndex == 0) ? _that
					.salesPriceModelArray[_that.salesPriceModelIndex].id : ''
				_that.productKeyId = (_that.productKeyIndex || _that.productKeyIndex == 0) ? _that.productKeyArray[_that
					.productKeyIndex].id : ''
				_that.getDataList()
			},
			getDataList() {
				let _that = this;
				_that.om.request("productCalculationShow/findList", {
					page: _that.pageNum,
					rows: _that.pageSize,
					salePropertyId: _that.salePropertyId,
					marketingPlanningProductId: _that.marketingPlanningProductId,
					salesPriceModelId: _that.salesPriceModelId,
					productKeyId: _that.productKeyId,
					newProductCode: _that.newProductCode,
					newProductStd: _that.newProductStd,
					expirationTime: moment().format('YYYY-MM-DD')
				}).then(res => {
					_that.dataList = _that.dataList.concat(res.rows)
					_that.dataStatus = true
					_that.pageTotal = res.totalPage
				})
			},
			calcBgColor(item) {
				return this.ColorList[3].name
			},
			getoLink(item) {
				let _that = this;
				let title = item.newProductCode

				let arr = [{
					name: '品号',
					value: item.newProductCode
				}, {
					name: '型号注释',
					value: item.dataRemark
				}, {
					name: '技术参数',
					value: item.projectFeature
				}, {
					name: '产品特点',
					value: item.productFeatures
				}];
				_that.om.getPageInfo(arr, title, {});
			},
		},
		onLoad(data) {
			let _that = this;

			// uni.setNavigationBarTitle({
			// 	title: '销售指导价查询'
			// });

			let arr = [
				_that.om.request("tsysdict/getCombobox", {
					code: '39821'
				}),
				_that.om.request("tsysdict/getCombobox", {
					code: '39053'
				}),
				_that.om.request("tsysdict/getCombobox", {
					code: '41750'
				}),
				_that.om.request("tsysdict/getCombobox", {
					code: '41069'
				})
			]

			//多个AJAX全部完成时开始执行
			Promise.all(arr).then(res => {
				_that.salePropertyArray = res[0]
				_that.marketingPlanningProductArray = res[1]
				_that.salesPriceModelArray = res[2]
				_that.productKeyArray = res[3]
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			let _that = this;
			if (_that.pageTotal > _that.pageNum) {
				_that.pageNum++
				_that.getDataList()
			}
		}
	};
</script>

<style scoped>
	.uni-list {
		background-color: #fff;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #c8c7cc;
	}

	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 7px 0;
		height: 35px;
		min-height: 35px;
		line-height: 35px;
	}

	.uni-list-cell-left {
		white-space: nowrap;
		font-size: 16px;
		width: 35%;
		text-align: right;
	}

	.uni-list-cell-db,
	.uni-list-cell-right {
		display: flex;
		flex-direction: row;
		padding-right: 15px;
		flex: 1;
		position: relative;
		justify-content: space-between;
		align-items: center;
	}

	.uni-list-cell-cont {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	uni-picker {
		font-size: 16px;
	}

	.uni-input {
		color: grey;
	}

	.uni-input.active {
		color: inherit;
	}

	.nodata {
		width: calc(100% - 30px);
		margin: 72px 15px 0;
		height: 26px;
		line-height: 26px;
		background: none;
		text-align: center;
	}
</style>